<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="订单管理"
      :columns="columns"
      :request-api="getTableList"
      :init-param="initParam"
      :data-callback="dataCallback"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button v-auth="'add'" icon="Plus" type="primary" @click="addAgvFn"> 新增 </el-button>
      </template>
      <!-- Expand -->
      <!-- <template #expand="scope">
        {{ row }}
      </template> -->
      <!-- 字典转换显示 -->
      <!-- <template #typeId="scope">
        {{ conversionDisplay(row.typeId, dict["productId"]) }}
      </template>
      <template #navigationId="scope">
        {{ conversionDisplay(row.navigationId, dict["navigation"]) }}
      </template>
      <template #communicationMethodId="scope">
        {{ conversionDisplay(row.communicationMethodId, dict["communicationMethod"]) }}
      </template>
      <template #picture="scope">
        <el-image
          style="width: 40px; height: 40px"
          :src="urlResource + row.picture"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="[urlResource + row.picture]"
          :initial-index="4"
          :z-index="100000000000000000"
          :preview-teleported="true"
          fit="cover"
        />
      </template> -->
      <template #code="{ row }">
        <div style="text-align: left">{{ row.code }}</div>
      </template>
      <template #businessId="{ row }">
        {{ getDictItem("businessType", row.businessId) }}
      </template>
      <template #typeId="{ row }">
        {{ getDictItem("orderType", row.typeId) }}
      </template>
      <template #productionFactoryId="{ row }">
        {{ getDictItem("productionFactory", row.productionFactoryId) }}
      </template>
      <template #planStartTime="{ row }">
        {{ row.planStartTime ? dayJs(row.planStartTime).format("YYYY/MM/DD") : "--" }}
      </template>
      <template #planEndTime="{ row }">
        {{ row.planEndTime ? dayJs(row.planEndTime).format("YYYY/MM/DD") : "--" }}
      </template>

      <template #orderTime="{ row }">
        {{ row.orderTime ? dayJs(row.orderTime).format("YYYY/MM/DD") : "--" }}
      </template>
      <template #gmtCreate="{ row }">
        {{ row.gmtCreate ? dayJs(row.gmtCreate).format("YYYY/MM/DD") : "--" }}
      </template>
      <template #productCategoryList="{ row }">
        {{ row.productCategoryList?.map(item => item.name || item.productCategoryName).join(",") || "--" }}
      </template>
      <template #count="{ row }">
        {{
          row.productCategoryList?.reduce((total, item) => {
            return total + item.count;
          }, 0) || 0
        }}
      </template>
      <template #status="{ row }">
        {{ getDictItem("orderStatus", row.status) }}
      </template>

      <!-- 表格操作 -->
      <template #operation="{ row }">
        <el-button v-auth="'detail'" type="primary" link @click="jump(row.id)"> 查看 </el-button>
        <el-button v-auth="'update'" type="primary" link @click="editAgvFn(row)"> 编辑 </el-button>
        <el-button v-auth="'delete'" type="primary" link @click="deleteAccount(row)"> 删除 </el-button>
      </template>
    </ProTable>
    <ImportExcel ref="dialogRef" />
    <div v-if="drawerVisible">
      <Dialog v-model:drawerVisible="drawerVisible" v-model:config="config" @change="refresh">
        <template #productCategoryList="{ scope }">
          <div class="summary-left-project">
            <div class="project-content">
              <el-table :data="scope" border :header-cell-style="{ background: '#eef1f6', color: '#606266' }" class="table">
                <!-- <el-table-column type="selection" width="55" /> -->
                <el-table-column prop="user" label="标准车型">
                  <template #default="{ row }">
                    <div>
                      <el-select
                        v-model="row.productCategoryId"
                        placeholder="请选择标准车型"
                        clearable
                        filterable
                        @change="changeCarType(row)"
                      >
                        <el-option v-for="item in productModelList" :key="item.name" :label="item.name" :value="item.id" />
                      </el-select>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="typeId" label="定制型号名">
                  <template #default="{ row }">
                    <div class="table-cell">
                      <el-input v-model="row.name"></el-input>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="count" label="数量">
                  <template #default="{ row }">
                    <div class="table-cell">
                      <el-input v-model="row.count" type="number"></el-input>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="60">
                  <template #default="{ row }">
                    <el-button v-if="!row.isEdit" link type="primary" size="small" @click.prevent="deleteCar($index, scope)">
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-button class="el-button-btn" type="default" :icon="Plus" @click="addCar(scope)">新增车俩</el-button>
            </div>
          </div>
        </template>
      </Dialog>
    </div>
  </div>
</template>

<script setup lang="tsx" name="useProTable">
import { ref, reactive, onMounted } from "vue"; // onMounted getCurrentInstance
import { useRouter } from "vue-router";
import { User } from "@/api/interface"; //Dict
import { useHandleData } from "@/hooks/useHandleData";
// import { useDownload } from "@/hooks/useDownload";
// import { useAuthButtons } from "@/hooks/useAuthButtons";
//import { ElMessage } from "element-plus"; // ElMessageBox
import ProTable from "@/components/ProTable/index.vue";
import ImportExcel from "@/components/ImportExcel/index.vue";
import Dialog from "@/components/DialogForm/index.vue";
import { useUserStore } from "@/stores/modules/user";
// import { genderType } from "@/utils/serviceDict"; // userStatus
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { Plus } from "@element-plus/icons-vue"; // Download, Upload,
import { getListAllUser } from "@/api/modules/sys"; // exportUserInfo,BatchAddUser getDict getParamByParentIdList,
import { getProductModelList } from "@/api/modules/carType"; // addProductModelAdd, updateProductModelUpdate,
import { getOrderPage, addOrder, deleteOrder, updateOrder } from "@/api/modules/order";
import { useDict } from "@/hooks/useDict";
import { getCompanyList } from "@/api/modules/customer";
import dayJs from "dayjs";
// hook
const { getDict, getDictItem, getDictAsync } = useDict(["orderType", "businessType", "orderStatus", "productionFactory"]);
const router = useRouter();
const userStore = useUserStore();
// 变量
let businessType = ref([]);
// businessType.value = ;
// console.log(businessType.value);
// let userInfo = ref({});
// const cxt = getCurrentInstance();
// const dict = cxt?.appContext.config.globalProperties.$dict;

// 跳转详情页
// const toDetail = () => {
//   router.push(`/proTable/useProTable/detail/${Math.random().toFixed(3)}?params=detail-page`);
// };
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ type: 1 });
let drawerVisible = ref(false);
let config = ref<any>({
  width: 60
});
let companyList = reactive([]);
const listAllUser = ref<any>([]);
let productModelList = reactive([]);
// computed
// const userInfos = computed(() => id => {
//   return listAllUser.value.find(item => item.id == id);
// });
// 方法
const jump = id => {
  router.push("/order/detail?id=" + id);
};
// 获取全部公司
const getCompanyListFn = async () => {
  const { data } = await getCompanyList();
  companyList = data || [];
  return companyList;
};
// 获取全部用户
const getListAllUserFn = async () => {
  const { data } = await getListAllUser();
  listAllUser.value = data;
};

// 获取字典数据
// const getDicList = async (params: Dict.ResDictList) => {
//   const { data } = await getParamByParentIdList(params);
//   return data || [];
// };
// 转换显示
// const conversionDisplay = (id: string, type: string) => {
//   const listItem = dictList[type]?.find(item => item.id === id);
//   return listItem?.name;
// };
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
  console.log(data.records);
  return {
    list: data.records,
    total: Number(data.total),
    pageNum: Number(data.current),
    pageSize: Number(data.size)
  };
};
// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = async (params: any) => {
  // let newParams = JSON.parse(JSON.stringify(params));
  // newParams.createTime && (newParams.startTime = newParams.createTime[0]);
  // newParams.createTime && (newParams.endTime = newParams.createTime[1]);
  // delete newParams.createTime;
  // 获取用户状态
  // industry: "1787649785398820864", // 行业
  // customerStatus: "1787769148986621952", // 客户状态
  // customerStage: "1787769229546618880", // 客户阶段
  // customerType: "1787769281602125824", // 客户类型
  // customerQuality: "1787769311167774720", // 客户性质
  // customerRating: "1787769346295070720", // 客户分级
  // importance: "1787769377903345664", // 重要程度
  // customerSource: "1787769406202314752", // 客户来源
  // const list: string[] = [dict.productId, dict.navigation, dict.communicationMethod, dict.batteryType];
  // dictList = await getDicList({ parentIdList: list.join(",") });
  // userStatus.value.forEach(item => {
  //   statusList.value[item.id] = item.name;
  // });
  // // 获取角色列表
  // const datas = await listAllRole();
  // userRoleList.value = datas.data;
  // newParams
  const newParams = {
    currentPage: params.pageNum,
    searchKey: params.searchKey ? params.searchKey : "",
    typeId: params.typeId,
    code: params.code,
    businessId: params.businessId,
    companyId: params.companyId,
    userId: router.currentRoute.value.path === "/order/profile" ? userStore.userInfo.id : undefined
  };
  return getOrderPage(newParams);
};

// 页面按钮权限（按钮权限既可以使用 hooks，也可以直接使用 v-auth 指令，指令适合直接绑定在按钮上，hooks 适合根据按钮权限显示不同的内容）
// const { BUTTONS } = useAuthButtons();
// 自定义渲染表头（使用tsx语法）
// const headerRender = (scope: HeaderRenderScope<User.ResUserList>) => {
//   return <el-button type="primary">{column.label}</el-button>;
// };
// 表格配置项
const columns: ColumnProps<User.ResUserList>[] = [
  { type: "selection", fixed: "left", width: 80, props: { selectable: false } },
  // { type: "index", label: "#", width: 80 },
  // { type: "expand", label: "Expand", width: 100 },
  {
    prop: "id",
    label: "ID",
    isShow: false
  },
  {
    prop: "code",
    label: "订单编号",
    search: { el: "input", label: "订单编号", key: "code" }
  },
  {
    prop: "companyId",
    label: "客户名称",
    search: { el: "select", label: "客户名称", key: "companyId", props: { filterable: true } },
    enum: async () => await getCompanyList(),
    fieldNames: { label: "name", value: "id" }
  },
  {
    prop: "productionFactoryId",
    label: "生产工厂"
    // search: { el: "input", label: "订单编号", key: "code" }
  },
  {
    prop: "typeId",
    label: "订单类型",
    search: { el: "select", label: "订单类型", key: "typeId", props: { filterable: true } },
    enum: async () => await getDictAsync("orderType"),
    fieldNames: { label: "name", value: "id" }
  },
  {
    prop: "businessId",
    label: "业务",
    search: { el: "select", label: "业务", key: "businessId", props: { filterable: true } },
    enum: async () => await getDictAsync("businessType"),
    fieldNames: { label: "name", value: "id" },
    isShow: false
  },
  {
    prop: "saleUserName",
    label: "销售人员"
  },
  {
    prop: "jointUserName",
    label: "协同人员",
    isShow: false
  },

  {
    prop: "productCategoryList",
    label: "定制型号"
  },
  {
    prop: "count",
    label: "数量"
  },
  {
    prop: "planStartTime",
    label: "订单下达时间"
  },
  {
    prop: "planEndTime",
    label: "订单交期"
  },
  {
    prop: "gmtCreate",
    label: "创建时间",
    isShow: false
  },
  {
    prop: "status",
    label: "订单状态"
  },
  {
    prop: "delayTime",
    label: "延期天数"
  },
  { prop: "operation", label: "操作", fixed: "right", width: 200 }
];

// 删除用户信息
const deleteAccount = async (params: User.ResUserList) => {
  await useHandleData(deleteOrder, { id: params.id }, `删除【${params.code}】`);
  proTable.value?.getTableList();
};

// 批量删除用户信息
// const batchDelete = async (id: string[]) => {
//   await useHandleData(deleteUser, { id }, "删除所选用户信息");
//   proTable.value?.clearSelection();
//   proTable.value?.getTableList();
// };

// 导出用户列表
// const downloadFile = async () => {
//   ElMessageBox.confirm("确认导出用户数据?", "温馨提示", { type: "warning" }).then(() =>
//     useDownload(exportUserInfo, "用户列表", proTable.value?.searchParam)
//   );
// };

// 批量添加用户
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null);
// const batchAdd = () => {
//   const params = {
//     title: "用户",
//     tempApi: exportUserInfo,
//     importApi: BatchAddUser,
//     getTableList: proTable.value?.getTableList
//   };
//   dialogRef.value?.acceptParams(params);
// };

const addAgvFn = () => {
  businessType.value = getDict("businessType");
  drawerVisible.value = true;
  config.value.title = "新增订单";
  config.value.form = {
    formData: {
      code: "",
      typeId: "",
      companyId: "",
      businessId: "",
      companyName: "",
      jointUserId: "",
      jointUserName: "",
      saleUserId: "",
      saleUserName: "",
      planStartTime: "",
      planEndTime: "",
      remark: "",
      contractCode: "",
      contractSignTime: "",
      productionFactoryId: "",
      productCategoryList: [
        {
          productCategoryId: "",
          productCategoryCode: "",
          productCategoryName: "",
          code: "",
          name: "",
          count: ""
        }
      ]
    },
    rules: {
      code: [{ required: true, message: "请填写订单编号" }],
      typeId: [{ required: true, message: "请选择订单类型" }],
      businessId: [{ required: true, message: "请选择业务" }],
      companyId: [{ required: true, message: "请选择客户" }],
      planStartTime: [{ required: true, message: "请选择订单下达时间" }],
      planEndTime: [{ required: true, message: "请选择订单交期时间" }],
      productionFactoryId: [{ required: true, message: "请选择生产工厂" }],
      saleUserId: [{ required: true, message: "请选择销售人员" }]
    }
  };
  config.value.column = [
    {
      type: "group",
      title: "",
      direction: "",
      list: [
        {
          type: "input",
          key: "code",
          formItemAttribute: {
            label: "订单编号"
          },
          attributes: {
            placeholder: "请填写订单编号"
          }
        },
        {
          type: "select",
          key: "typeId",
          formItemAttribute: {
            label: "订单类型"
          },
          attributes: {
            placeholder: "请选择订单类型",
            options: getDict("orderType"),
            multiple: false,
            filterable: true,
            clearable: true,
            changeFn: (val: any, origin: any) => {
              config.value.column[0].list[2].attributes.options = businessType.value.filter(item => item.value === val);
              origin.formData.businessId = "";
            }
          }
        },
        {
          type: "select",
          key: "businessId",
          formItemAttribute: {
            label: "业务"
          },
          attributes: {
            placeholder: "请选择业务",
            options: [],
            multiple: false,
            filterable: true,
            clearable: true
          }
        },
        {
          type: "select",
          key: "companyId",
          formItemAttribute: {
            label: "客户名称"
          },
          attributes: {
            placeholder: "请选择客户名称",
            options: companyList,
            multiple: false,
            filterable: true,
            clearable: true,
            changeFn: (val: any, origin: any) => {
              const obj = companyList.find(item => item.id === val);
              origin.formData.companyName = obj.name;
            }
          }
        }
      ]
    },
    {
      type: "group",
      title: "",
      direction: "",
      list: [
        {
          type: "select",
          key: "saleUserId",
          formItemAttribute: {
            label: "销售人员"
          },
          attributes: {
            placeholder: "请选择销售人员",
            options: listAllUser.value,
            multiple: false,
            filterable: true,
            clearable: true,
            changeFn: (val: any, origin: any) => {
              const obj = listAllUser.value.find(item => item.id === val);
              origin.formData.saleUserName = obj.name;
            }
          }
        },
        {
          type: "select",
          key: "jointUserId",
          formItemAttribute: {
            label: "协同人员"
          },
          attributes: {
            placeholder: "请选择协同人员",
            options: listAllUser.value,
            multiple: false,
            filterable: true,
            clearable: true,
            changeFn: (val: any, origin: any) => {
              const obj = listAllUser.value.find(item => item.id === val);
              origin.formData.jointUserName = obj.name;
            }
          }
        },
        {
          type: "date-picker",
          key: "planStartTime",
          formItemAttribute: {
            label: "订单下达时间"
          },
          attributes: {
            placeholder: "请选择订单下达时间",
            format: "YYYY-MM-DD",
            valueFormat: "YYYY-MM-DD HH:mm:ss"
          }
        },
        {
          type: "date-picker",
          key: "planEndTime",
          formItemAttribute: {
            label: "订单交期"
          },
          attributes: {
            placeholder: "请选择订单交期",
            format: "YYYY-MM-DD",
            valueFormat: "YYYY-MM-DD HH:mm:ss"
          }
        }
      ]
    },
    {
      type: "group",
      title: "",
      direction: "",
      layout: "grid",
      len: 4,
      list: [
        {
          type: "select",
          key: "productionFactoryId",
          formItemAttribute: {
            label: "生产工厂"
          },
          attributes: {
            placeholder: "请选择生产工厂",
            options: getDict("productionFactory"),
            multiple: false,
            filterable: true,
            clearable: true
          }
        },
        {
          type: "input",
          key: "contractCode",
          formItemAttribute: {
            label: "合同编号"
          },
          attributes: {
            placeholder: "请填写合同编号"
          }
        },
        {
          type: "date-picker",
          key: "contractSignTime",
          formItemAttribute: {
            label: "合同日期"
          },
          attributes: {
            placeholder: "请填写合同日期",
            format: "YYYY-MM-DD",
            valueFormat: "YYYY-MM-DD HH:mm:ss"
          }
        }
      ]
    },
    {
      type: "input",
      key: "remark",
      formItemAttribute: {
        label: "订单备注"
      },
      attributes: {
        placeholder: "请填写订单备注",
        type: "textarea"
      }
    },
    {
      type: "slot",
      key: "productCategoryList",
      formItemAttribute: {
        label: "车辆信息"
      },
      attributes: {}
    }
  ];
  config.value.api = addOrder;
  config.value.transformData = data => {
    return data;
  };
  config.value.message = "添加成功";
};
const editAgvFn = row => {
  row = JSON.parse(JSON.stringify(row));
  businessType.value = getDict("businessType");
  drawerVisible.value = true;
  config.value.title = "编辑订单";
  config.value.form = {
    formData: {
      id: row.id,
      code: row.code,
      typeId: row.typeId,
      companyId: row.companyId,
      businessId: row.businessId,
      companyName: row.companyName,
      jointUserId: row.jointUserId,
      remark: row.remark,
      jointUserName: row.jointUserName,
      saleUserId: row.saleUserId,
      saleUserName: row.saleUserName,
      planStartTime: row.planStartTime,
      planEndTime: row.planEndTime,
      contractCode: row.contractCode,
      contractSignTime: row.contractSignTime,
      productCategoryList: row.productCategoryList,
      productionFactoryId: row.productionFactoryId
    },
    rules: {
      code: [{ required: true, message: "请填写订单编号" }],
      typeId: [{ required: true, message: "请选择订单类型" }],
      businessId: [{ required: true, message: "请选择业务" }],
      companyId: [{ required: true, message: "请选择客户" }],
      planStartTime: [{ required: true, message: "请选择订单下达时间" }],
      planEndTime: [{ required: true, message: "请选择订单交期" }],
      productionFactoryId: [{ required: true, message: "请选择生产工厂" }],
      saleUserId: [{ required: true, message: "请选择销售人员" }]
    }
  };
  config.value.column = [
    {
      type: "group",
      title: "",
      direction: "",
      list: [
        {
          type: "input",
          key: "code",
          formItemAttribute: {
            label: "订单编号"
          },
          attributes: {
            placeholder: "请填写订单编号",
            disabled: true
          }
        },
        {
          type: "select",
          key: "typeId",
          formItemAttribute: {
            label: "订单类型"
          },
          attributes: {
            placeholder: "请选择订单类型",
            options: getDict("orderType"),
            disabled: true,
            multiple: false,
            filterable: true,
            clearable: true,
            changeFn: (val: any, origin: any) => {
              config.value.column[0].list[2].attributes.options = businessType.value.filter(item => item.value === val);
              origin.formData.businessId = "";
            }
          }
        },
        {
          type: "select",
          key: "businessId",
          formItemAttribute: {
            label: "业务"
          },
          attributes: {
            placeholder: "请选择业务",
            options: businessType.value,
            multiple: false,
            disabled: true,
            filterable: true,
            clearable: true
          }
        },
        {
          type: "select",
          key: "companyId",
          formItemAttribute: {
            label: "客户名称"
          },
          attributes: {
            placeholder: "请选择客户名称",
            options: companyList,
            multiple: false,
            filterable: true,
            clearable: true,
            changeFn: (val: any, origin: any) => {
              const obj = companyList.find(item => item.id === val);
              origin.formData.companyName = obj.name;
            }
          }
        }
      ]
    },
    {
      type: "group",
      title: "",
      direction: "",
      list: [
        {
          type: "select",
          key: "saleUserId",
          formItemAttribute: {
            label: "销售人员"
          },
          attributes: {
            placeholder: "请选择销售人员",
            options: listAllUser.value,
            multiple: false,
            filterable: true,
            clearable: true,
            changeFn: (val: any, origin: any) => {
              const obj = listAllUser.value.find(item => item.id === val);
              origin.formData.saleUserName = obj.name;
            }
          }
        },
        {
          type: "select",
          key: "jointUserId",
          formItemAttribute: {
            label: "协同人员"
          },
          attributes: {
            placeholder: "请选择协同人员",
            options: listAllUser.value,
            multiple: false,
            filterable: true,
            clearable: true,
            changeFn: (val: any, origin: any) => {
              const obj = listAllUser.value.find(item => item.id === val);
              origin.formData.jointUserName = obj.name;
            }
          }
        },
        {
          type: "date-picker",
          key: "planStartTime",
          formItemAttribute: {
            label: "订单下达时间"
          },
          attributes: {
            placeholder: "请选择订单下达时间",
            format: "YYYY-MM-DD",
            valueFormat: "YYYY-MM-DD HH:mm:ss"
          }
        },
        {
          type: "date-picker",
          key: "planEndTime",
          formItemAttribute: {
            label: "订单交期"
          },
          attributes: {
            placeholder: "请选择订单交期",
            format: "YYYY-MM-DD",
            valueFormat: "YYYY-MM-DD HH:mm:ss"
          }
        }
      ]
    },
    {
      type: "group",
      title: "",
      direction: "",
      layout: "grid",
      len: 4,
      list: [
        {
          type: "select",
          key: "productionFactoryId",
          formItemAttribute: {
            label: "生产工厂"
          },
          attributes: {
            placeholder: "请选择生产工厂",
            options: getDict("productionFactory"),
            multiple: false,
            filterable: true,
            clearable: true
          }
        },
        {
          type: "input",
          key: "contractCode",
          formItemAttribute: {
            label: "合同编号"
          },
          attributes: {
            placeholder: "请填写合同编号"
          }
        },
        {
          type: "date-picker",
          key: "contractSignTime",
          formItemAttribute: {
            label: "合同日期"
          },
          attributes: {
            placeholder: "请填写合同日期",
            format: "YYYY-MM-DD",
            valueFormat: "YYYY-MM-DD HH:mm:ss"
          }
        }
      ]
    },
    {
      type: "input",
      key: "remark",
      formItemAttribute: {
        label: "订单备注"
      },
      attributes: {
        placeholder: "请填写订单备注",
        type: "textarea"
      }
    },
    {
      type: "slot",
      key: "productCategoryList",
      formItemAttribute: {
        label: "车辆信息"
      },
      attributes: {}
    }
  ];
  config.value.api = updateOrder;
  config.value.transformData = data => {
    return data;
  };
  config.value.message = "编辑成功";
};
const refresh = () => {
  proTable.value?.getTableList();
};
const getProductModelListFn = async () => {
  const { data } = await getProductModelList();
  productModelList = data;
};
// const addMemberFn = async () => {
//   detail.value.userModels.push({
//     userId: "",
//     typeId: "",
//     isEdit: true
//   });
// };
const addCar = scope => {
  scope.push({
    productCategoryId: "",
    productCategoryCode: "",
    productCategoryName: "",
    code: "",
    name: "",
    count: ""
  });
};
const deleteCar = (index, scope) => {
  scope.splice(index, 1);
};

const changeCarType = row => {
  // productModelList
  const obj = productModelList.find(item => item.id === row.productCategoryId);
  row.productCategoryId = obj.id;
  row.productCategoryCode = obj.code;
  row.productCategoryName = obj.name;
  console.log(row);
};

// const addMemberFn = async () => {
//   detail.value.userModels.push({
//     userId: "",
//     typeId: "",
//     isEdit: true
//   });
// };

onMounted(async () => {
  getListAllUserFn();
  getCompanyListFn();
  getProductModelListFn();
});
</script>
<style lang="scss" scoped>
.summary-left-project {
  margin-top: 10px;
  background: #ffffff;
  .project-title {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    padding: 0 30px;
    span:first-child {
      font-size: 16px;
      font-weight: 600;
      color: #333333;
    }
    span:last-child {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 600;
      color: #333333;
      cursor: pointer;
      i:first-child {
        width: 15px;
        height: 15px;
        margin-right: 10px;
        font-size: 15px;
        color: #666666;
      }
    }
  }
  .project-content {
    .user-wrap {
      display: flex;
      align-items: center;
      img {
        width: 32px;
        height: 32px;
        margin-right: 10px;
        border-radius: 50%;
      }
      span:last-child {
        font-size: 14px;
        font-weight: 400;
        color: #333333;
      }
    }
  }
  .project-content-wrap {
    padding: 0 30px 20px;
    .project-content-item {
      display: flex;
      flex-flow: column nowrap;
      .title {
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: 400;
        color: #999999;
      }
      .fontWeight {
        font-size: 16px;
      }
      .content {
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
      }
    }
  }
  .empty-box {
    padding: 0 30px 20px;
    font-size: 14px;
    color: var(--el-text-color-secondary);
    text-align: center;
  }
  .el-button-btn {
    margin-top: 20px;
  }
}
</style>
